<template>
  <div class="report-containers">
    <!-- 报告头部 -->
    <div class="report-header">
      <h1 class="report-title">抖音周报<span class="star-icon">✨</span>
        <div class="merchant-name">{{ merchantInfo?.name }}</div>
      </h1>
    </div>

    <!-- 交易分析章节 -->
    <div class="report-section transaction-analysis">
      <h2 class="section-title">一、交易分析</h2>

      <!-- 门店分析卡片 -->
      <StoreAnalysisCard :section-data="getSectionData('交易数据')" />
      <!-- 成交商品TOP5卡片 -->
      <TopProductsCard :section-data="getSectionData('成交商品TOP5')" />

      <!-- 交易分析-商品卡片 -->
      <TradeAnalysisCard :section-data="[getSectionData('成交渠道'), getSectionData('渠道来源')]" />
    </div>

    <!-- 流量分析章节 -->
    <div class="report-section flow-analysis">
      <h2 class="section-title">二、流量分析</h2>
      <FlowAnalysisCard
        :section-data="{ title: '流量分析', items: [...getSectionData('视频成交').items, ...getSectionData('直播间基础数据').items] }" />
      <VideoCompositionCard
        :section-data="{ title: '短视频构成', items: [...getSectionData('官号视频数据').items, ...getSectionData('达人视频数据').items, ...getSectionData('店员视频数据').items, ...getSectionData('UGC视频数据').items] }" />
      <LiveCompositionCard
        :section-data="{ title: '直播构成', items: [...getSectionData('直播间基础数据').items, ...getSectionData('商家直播').items, ...getSectionData('达人直播').items, ...getSectionData('店员直播').items] }" />
      <ThemeCard :section-data="getSectionData('流量分析数据')" />
      <!-- <DataAnalysisCard :aiContent="aiContent" /> -->
    </div>

    <!-- 顾客分析章节 -->
    <div class="report-section customer-analysis">
      <h2 class="section-title">三、顾客分析</h2>
      <BasicCustomerCard
        :section-data="{ title: '基本顾客数据', items: [...getSectionData('采集新客人群数据').items, ...getSectionData('采集老客人群数据').items] }" />
      <!-- <CustomerPortraitCard :section-data="getSectionData('用户画像预测分析')" /> -->
    </div>

    <!-- 经营评分章节 -->
    <!-- <div class="report-section">
      <h2 class="section-title">四、经营评分</h2>
      <BusinessScoreCard :section-data="getSectionData('采客经营分')" />
    </div> -->

    <!-- 服务评价章节 -->
    <div class="report-section">
      <h2 class="section-title">四、服务评价</h2>
      <ServiceReviewCard :section-data="getSectionData('评价统计')" />
    </div>

    <!-- 星级榜单变化章节 -->
    <div class="report-section">
      <h2 class="section-title">五、星级榜单变化</h2>
      <StarRatingCard :section-data="getSectionData('评价统计')" />
      <!-- <RankingListCard :section-data="getSectionData('星级榜单变化')" /> -->
    </div>
    <div class="report-section">
      <h2 class="section-title">六、运营分析</h2>
      <div class="analysis-cards">
        <div id="markdown-content" class="markdown-body" v-html="renderedMarkdown"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ReportSection } from '../../types/report'
import type { AnalysisResult } from '../../api'
import StoreAnalysisCard from './cards/StoreAnalysisCard.vue'
import TradeAnalysisCard from './cards/TradeAnalysisCard.vue'
import TopProductsCard from './cards/TopProductsCard.vue'
import FlowAnalysisCard from './cards/FlowAnalysisCard.vue'
import VideoCompositionCard from './cards/VideoCompositionCard.vue'
import LiveCompositionCard from './cards/LiveCompositionCard.vue'
import ThemeCard from './cards/ThemeCard.vue'
import DataAnalysisCard from './cards/DataAnalysisCard.vue'
import BusinessScoreCard from './cards/BusinessScoreCard.vue'
import ServiceReviewCard from './cards/ServiceReviewCard.vue'
import StarRatingCard from './cards/StarRatingCard.vue'
import RankingListCard from './cards/RankingListCard.vue'
import BasicCustomerCard from './cards/BasicCustomerCard.vue'
import CustomerPortraitCard from './cards/CustomerPortraitCard.vue'
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'

interface Props {
  templateData: ReportSection[]
  aiContent: AnalysisResult | null
  merchantInfo?: { name: string, id: string }
}

const props = defineProps<Props>()

const getSectionData = (sectionTitle: string): ReportSection => {
  return props.templateData.find(section => section.title === sectionTitle) || {
    title: sectionTitle,
    items: []
  }
}
// 初始化 markdown-it
const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true
})
// 计算属性：将 markdown 转换为 HTML
const renderedMarkdown = computed(() => {
  // console.log(md.render(props.aiContent || ''),'md.render(props.aiContent )');

  return md.render(props.aiContent || '')
})
</script>

<style scoped>
/* 基础布局 */
.report-containers {
  max-width: 1200px;
  margin: 12px auto;
  padding: 20px;
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
  min-height: 100vh;
  border-radius: 12px;
}

/* 报告头部 */
.report-header {
  margin-bottom: 24px;
  padding: 16px;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.report-title {
  font-size: 28px;
  color: #2d3748;
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-icon {
  color: #FFD700;
  font-size: 24px;
}

.merchant-name {
  font-size: 18px;
  color: #4a5568;
  margin-top: 5px;
}

/* 章节标题 */
.section-title {
  margin: 24px 0 16px;
  padding: 12px 16px;
  background: linear-gradient(to right, #f0f4f8, #f8fafc);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  color: #1a202c;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  border-left: 4px solid #4a5568;
}

/* 章节分页控制 */
.flow-analysis {
  break-before: page !important;
  page-break-before: always !important;
  margin-top: 16px;
}

/* 顾客分析章节样式 */
.customer-analysis {
  break-before: page !important;
  page-break-before: always !important;
  margin-top: 16px;
}

.report-section {
  break-inside: avoid-page !important;
  page-break-inside: avoid !important;
  margin-bottom: 16px;
}
.analysis-cards {
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
  color: #ffffff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 添加 markdown 样式 */
.markdown-body {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  box-sizing: border-box;
  color: #ffffff;
}

.markdown-body :deep(h1),
.markdown-body :deep(h2),
.markdown-body :deep(h3),
.markdown-body :deep(h4),
.markdown-body :deep(h5),
.markdown-body :deep(h6) {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body :deep(table) {
  display: block;
  width: 100%;
  overflow: auto;
  margin-top: 0;
  margin-bottom: 16px;
  border-spacing: 0;
  border-collapse: collapse;
}

.markdown-body :deep(table th),
.markdown-body :deep(table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  color: #2d3748;
}

.markdown-body :deep(table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
  color: #2d3748;
}

.markdown-body :deep(table tr:nth-child(2n)) {
  background-color: #f6f8fa;
  color: #2d3748;
}

.markdown-body :deep(code) {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}

.markdown-body :deep(pre) {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.markdown-body :deep(pre code) {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
</style>